<template>
	<view class="content">
		<u-navbar height="50" back-icon-color="#333" title="设置" title-color="#333" title-size="36">
		</u-navbar>
		<view class="imageHeadView" @click="onUpload()">
			<u-avatar :src="userInfo.avatar_format" mode="circle" size="180"></u-avatar>
			<view class="headTitle">点击修改头像</view>
		</view>
		<view class="itemView" @click="()=>this.showPopup = true">
			<text class="itemTitle">用户昵称</text>
			<view class="itemText">{{userInfo.nickname}} <span class="icon"></span></view>
		</view>
		<view class="itemView">
			<text class="itemTitle">注册手机号</text>
			<text>{{userInfo.phone}}</text>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="itemView" @click="goChange()">
			<text class="itemTitle">修改登录密码</text>
			<u-icon name="arrow-right" size="32" color="#333"></u-icon>
		</view>
		<!-- #endif -->
		<view class="itemView" style="margin-top: 20rpx;" @click="goW(2)">
			<text class="itemTitle">用户协议</text>
			<u-icon name="arrow-right" size="32" color="#333"></u-icon>
		</view>
		<view class="itemView" @click="goW(3)">
			<text class="itemTitle">隐私政策</text>
			<u-icon name="arrow-right" size="32" color="#333"></u-icon>
		</view>
		<view class="itemBottom">
			<view class="exitView" @click="exitLogin()">退出登录</view>
		</view>
		<u-popup v-model="showPopup" mode="center" width="560rpx" border-radius="20" :closeable="true">
			<view class="edit">
				<view class="title">
					修改昵称
				</view>
				<view class="input">
					<input v-model="value" type="text" placeholder="请输入昵称" />
				</view>
				<view class="confirm" @click="updateN">
					确认修改
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getUserInfo,
		updateAvatar,
		updateName
	} from '../../api/user';
	import baseUrl from '@/config/config.js'
	import {
		closeload,
		tiao,
		toast, toastC, toastload
	} from '../../utils/common';
	export default {
		data() {
			return {
				showPopup: false,
				inputModal: false,
				messageModal: false,
				messageText: '',
				userInfo: '',
				realname: '',
				isPassword: 0,
				value:""
			}
		},
		onShow() {
			this.onUserInfo();
		},
		methods: {
			onUserInfo() {
				toastload()
				let self = this
				getUserInfo().then(res => {
					closeload()
					self.userInfo = res.data
				})
			},
			onUpload() {
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						uni.uploadFile({
							url: baseUrl.baseUrl + 'public/images/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								if (res.statusCode == 200) {
									let data = JSON.parse(res.data);
									if (data.data) {
										console.log("开始修改");
										self.upHeadImage(data.data);
									}
									uni.hideLoading();
								}
							},
							complete(res) {
								uni.hideLoading();
							}
						})
					}
				});
			},
			upHeadImage(path) {
				console.log("正在修改", path);
				let self = this;
				updateAvatar({
					avatar: path
				}).then(res => {
					self.onUserInfo();
				})
			},

			go(url) {
				uni.navigateTo({
					url
				})
			},

			exitLogin() {
				// this.messageType = 1;
				// uni.setStorageSync('isLogin', false);
				// uni.setStorageSync('access_token', '');
				uni.clearStorageSync();
				toast('已退出登录')
				setTimeout(function() {
					uni.navigateBack()
				}, 500);
			},
			updateN(){
				if(!this.value){
					toast("请输入昵称")
					return
				}
				updateName({
					nickname:this.value
				}).then(res=>{
					if(res.code==200){
						toastC("修改成功")
						setTimeout(()=>{
							this.showPopup = false
							this.onUserInfo()
						},500)
					}
				})
			},
			goChange(){
				uni.navigateTo({
					url:'/other/changePassword/changePassword'
				})
				// tiao('/other/changePassowrd/changePassowrd')
			},
			goW(index){
				uni.navigateTo({
					url:'/other/webData/webData?type='+index
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
	}

	.imageHeadView {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		background-color: #FFF;
		margin-bottom: 2rpx;
	}

	.imageHead {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background: #f5f5f5;
	}

	.headTitle {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 30rpx;
	}

	.itemView {
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #f5f5f5;
		box-sizing: border-box;
		padding: 0 30rpx;
	}


	.itemTitle {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	.itemText {
		font-size: 28rpx;
		color: #333;
		margin-left: 10rpx;
		margin-right: 30rpx;
		text-align: right;
	}

	.nextImage {
		width: 14rpx;
		height: 26rpx;
		margin-right: 30rpx;
	}

	.itemBottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 50rpx;
		margin-bottom: 100rpx;
	}

	.logoutView {
		flex: 1;
		border: 2rpx solid #D6D6D6;
		border-radius: 46rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		margin-right: 25rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.exitView {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-left: 25rpx;
		background: #D6D6D6;
		border-radius: 36rpx;
		margin-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.slot-content {
		display: flex;
		flex-direction: column;
	}

	.inputView {
		height: 70rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		margin: 40rpx 20rpx;
		padding: 0px 20rpx;
		font-size: 30rpx;
		color: #333333;
	}


	page {
		height: 100%;
		background-color: #F9F9F9;
	}
	
	.edit{
		width: 560rpx;
		height: 300rpx;
		box-sizing: border-box;
		padding: 40rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		overflow: hidden;
		.title{
			font-size: 36rpx;
			font-weight: bold;
		}
		.input{
			border-radius: 15rpx;
			width: 300rpx;
			padding: 10rpx;
			border: 1rpx solid #dedede;
		}
		.confirm{
			width: 300rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background-color: $u-type-error;
			color: #fff;
			border-radius: 15rpx;
		}
	}
</style>